<template>
  <view class="layout-component">
    <view class="top-layout">
      <view class="left-layout bg"></view>
      <view class="right-layout">
        <view class="item-layout bg"></view>
        <view class="item-layout bg"></view>
        <view class="item-layout bg"></view>
        <view class="item-layout bg"></view>
      </view>
    </view>
    <view class="bottom-layout bg"></view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.layout-component {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  //   grid-template-rows: repeat(2, 100rpx);
  column-gap: 10rpx;
  row-gap: 10rpx;
  .top-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10rpx;
    row-gap: 10rpx;
    .left-layout {
      height: 260rpx;
    }
    .right-layout {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 10rpx;
      row-gap: 10rpx;
    }
  }
  .bottom-layout {
    height: 100rpx;
  }
  .bg {
    background-color: #a7edff;
    border-radius: 10rpx;
  }
}
</style>
